<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<html>
	<head>
		<meta charset="UTF-8">
		<title>共富网亿元礼包大派发 </title>
		<jsp:include page="/include/wchat/head.jsp"></jsp:include>
<style>
html { height: 100%; -webkit-text-size-adjust: none; position: relative }
body { height: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-backface-visibility: hidden; -webkit-user-select: none; position: relative; background-color: #000 }
#cwrap { position: relative; min-width: 320px; margin: 0 auto }
.mg-t { padding:10px 0 0; overflow: hidden }
.fl-rt { float: right }
.cbg { width: 100%; height: 100%; background:url(/v2/wchat/resrc/img/event/wlcShare/body_bg.jpg) repeat #f7e1b2 }
.banner { padding: 20px 0; line-height: normal; text-align: center; font-size: 15px; color: #333 }
.banner em { padding: 0 5px; color: #d84121 }
.elopbox { position: relative; margin: 0 auto; width: 300px; height: 480px; background:url(/v2/wchat/resrc/img/event/wlcShare/pic-1.png)no-repeat;
background-size: 300px auto; text-align: center }
.elopbox .c-loge { margin: 0 auto; display: block; width: 39px; height: 45px; background:url(/v2/wchat/resrc/img/event/wlcShare/loge.png)no-repeat;
background-size: 39px 45px }
.elopbox .txt { padding: 20px 0 40px; line-height: 28px; font-size: 18px; color: #ffdc6b; text-align: center }
.elopbox .txt em { display: block; font-size: 12px }
.elopbox .txt-mg { padding-bottom: 0; margin-bottom: -20px; }
.elopbox .money { padding: 140px 0 20px; width: 320px; margin: 0 auto; font-size: 46px; display: block; line-height: 50px; color: #fff; text-align: center }
.money em { margin-right: 5px; font-size: 50px }
.elopbox .nc { margin: 20px auto 0; display: block; width: 199px; height: 22px; background:url(/v2/wchat/resrc/img/event/wlcShare/nc-1.png);
background-size: 199px 22px }
.elopbox .day { padding: 40px 0 20px; width: 320px; margin: 0 auto; font-size: 12px; display: block; line-height: 22px; color: #fff; text-align: center }
.day em { margin: 0 3px; font-size: 13px }
.explain { position: relative; margin: 0 auto; width: 320px }
.case-tabs { position: relative; margin: 0 auto 20px; width: 302px; height: 30px; border: 1px solid #d22414; border-radius: 5px; overflow: hidden }
.case-tabs ul { margin-left: -1px; }
.case-tabs li { float: left; display: inline; position: relative; width: 100px; height: 30px; line-height: 30px; text-align: center; color: #d22414; border-left: 1px solid #d22414; cursor: pointer }
.case-tabs li.active { background: #d22414; color: #fff }
.caseBox { position: relative; margin: 0 auto; width: 302px; }
.activity li { margin: 0 0 10px 20px; list-style: decimal; line-height: 20px }
.activity h3 { margin-top: 20px; }
.friend li { height: 40px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #d22414 }
.friend em { display: block; margin-bottom: 3px }
.friend span { float: left }
.friend span.col-1 { width: 15%; }
.friend span.col-1 img { width: 32px; height: 32px; border: 2px solid #fff; border-radius: 3px }
.friend span.col-2 { width: 55% }
.friend span.col-2 em { font-weight: bold }
.friend span.col-3 { width: 30%; text-align: right }
.friend span.col-3 em { color: #d22414 }
/*新样式*/
.pg165 { padding: 165px 0 20px }
.ft50 { padding-bottom: 35px; font-size: 45px; line-height: 50px; text-shadow: 3px 2px 3px #b3281b; color: #fff }
.ft24 { padding-bottom: 20px; font-size: 12px; color: #fdef8a }
.ft30 { font-size: 15px; color: #fdef8a; line-height: 24px }
.ft48 { padding-top: 36px; font-size: 24px; color: #fdef8a }
.elopbox .button-1{ margin: 0 auto; display: block; width: 204px; height: 46px; background:url(/v2/wchat/resrc/img/event/wlcShare/btn-1.png);
background-size: 204px 46px }
.elopbox .button-2 { margin: 0 auto; display: block; width: 204px; height: 46px; background:url(/v2/wchat/resrc/img/event/wlcShare/btn-2.png);
background-size: 204px 46px }
.elopbox .button-3 { margin: 0 auto; display: block; width: 204px; height: 46px; background:url(/v2/wchat/resrc/img/event/wlcShare/btn-3.png);
background-size: 204px 46px }
.elopbox .button-4 { margin: 0 auto; display: block; width: 204px; height: 46px; background:url(/v2/wchat/resrc/img/event/wlcShare/btn-4.png);
background-size: 204px 46px }
.elopbox .button-5 { margin: 0 auto; display: block; width: 204px; height: 46px; background:url(/v2/wchat/resrc/img/event/wlcShare/btn-5.png);
background-size: 204px 46px }
.activity-1, .get { position: relative; margin: 0 auto; width: 302px }
.activity-1{padding-bottom: 50px}
.activity-1 li { margin: 0 0 10px 20px; list-style: decimal; line-height: 20px }
.activity-1 h3 { margin: 20px 0 10px; }
.get h3 { padding: 20px 0; font-size: 15px; color: #333 }
.get h3 em { margin: 0 3px; color: #ce321f }
.get li { font-size: 13px; min-height: 20px; margin-bottom:10px; padding:10px 0; text-align:left; overflow:hidden; zoom:1; border-bottom: 1px solid #eea076 }
.get span { float: left; width: 33%; color: #666 }
.get span.col-1 { width:30%}
.get span.col-2 { width:45%}
.get span.col-3 { width:25%; text-align: right; color: #ce321f }
.get .line { margin-bottom: 5px; height: 10px; text-align: center; border-bottom: 1px solid #eea076; }
.get .line em { margin: 0 auto; width: 130px; padding: 0 20px; color: #666; font-size: 13px; background: #ffeeb5 }
.share-layer { width: 100%; height: 100%; position:fixed; left: 0; top: 0; right:0; bottom:0; background: rgba(0,0,0,.85); display: none; text-align: center }
.share-layer div{ margin:0 auto; background:url(/v2/wchat/resrc/img/share-guide@2x.png) no-repeat top center; background-size: 276px 220px; width:276px; height:220px}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){
    .share-layer div{ background:url(/v2/wchat/resrc/img/share-guide@3x.png) no-repeat top center; background-size: 380px 304px; width:380px; height:304px}
}
</style>
		<link href="/v2/wchat/resrc/css/animate.css?version=20150326213134"
			rel="stylesheet">
	</head>
	<body class="cbg">
		<div id="cwrap">
			<div class="banner">
				共富出本金，您来拿收益！
			</div>
			<!--马上分享-->
			<div class="elopbox" id="share">
				<p class="pg165">
					<img src="/v2/wchat/resrc/img/event/wlcShare/loge.png" width="150"
						height="51">
				</p>
				<p class="ft50">
					50,000元
				</p>
				<p class="ft24">
					共富网红包大派发
					<br>
					分享红包，和好友一起抢红包
				</p>
				<a href="javascript:void(0)" id="join_btn" class="button-5"></a>
			</div>
			
			 <!--绑定手机-->
			<div class="elopbox" id="bind" style="display: none;">
				<p class="pg165">
					<img src="/v2/wchat/resrc/img/event/wlcShare/loge.png" width="150"
						height="51">
				</p>
				<p class="ft50">
					50,000元
				</p>
				<p class="ft24">
					亲，请先绑定手机号
					<br>
					再来发红包
				</p>
				<a href="/bindMobile.do" class="button-4"></a>
			</div>
			
			<!--先投资-->
			<div class="elopbox" id="invest" style="display: none;">
				<p class="pg165">
					<img src="/v2/wchat/resrc/img/event/wlcShare/loge.png" width="150"
						height="51">
				</p>
				<p class="ft50">50,000元</p>
            	<p class="ft24">亲，此活动只面向已投资用户<br/>现在去投资</p>
				<a href="/wchatIndex.do" class="button-1"></a>
			</div>

			<!--红包过期-->
			<div class="elopbox" id="envelopeDead" style="display: none;">
				<p class="pg165">
					<img src="/v2/wchat/resrc/img/event/wlcShare/loge.png" width="150"
						height="51">
				</p>
				<p class="ft48">
					亲，红包已过期
				</p>
			</div>
			
			<!--红包已发完-->
			<div class="elopbox" id="envelopeEnd" style="display: none;">
				<p class="pg165">
					<img src="/v2/wchat/resrc/img/event/wlcShare/loge.png" width="150"
						height="51">
				</p>
				<p class="ft50">50,000元</p>
				<p class="ft24">
					亲，亿元红包已领完
					<br/>
					立即投资，获取下次活动参与机会
				</p>
				<a href="/wchatIndex.do" class="button-1"></a>
			</div>

			<div class="activity-1">
				<h3>
					活动规则
				</h3>
				<ul>
					<li>
						用户分享50,000元红包到朋友圈，让朋友们一起抢红包，至少6人参与，才算抢红包成功
					</li>
					<li>
						帮抢红包的用户，抢红包成功后，将随机得到50,000元红包中的一定金额作为理财体验金奖励，奖励会放在抢红包时输入的手机号所对应的共富网账户中
					</li>
					<li>
						需在30天内使用体验金，过期则由共富网收回
					</li>
					<li>
						有投资记录的用户或者活动期间新注册用户通过电脑登录获得50,000元红包，扫描二维码后分享给微信朋友一起抢红包
					</li>
				</ul>
				<a href="/v2/wchat/appCommon/event/wlcShare/index.jsp" class="mg-t">查看详细规则</a>
			</div>
			<div class="share-layer">
				<div></div>
			</div>
		</div>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        debug: false,
        appId: '${wxConfigMap.appId}',
        timestamp: ${wxConfigMap.timestamp},
        nonceStr: '${wxConfigMap.nonceStr}',
        signature: '${wxConfigMap.signature}',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'hideOptionMenu',
        ]
    });
    wx.ready(function () {
    	wx.hideOptionMenu();
    });
</script>

		<script type="text/javascript">
	$(function() {
		$('#join_btn').click(function(){
			join();	
		});

	})

	function join() {
		$.ajax( {
					url : "/wlcShareInit.do",
					dataType : "json",
					type : "POST",
					success : function(data) {
						if (data.msg == 'success') {
							window.location.href = "/wlcShareInfo.do?param="
									+ data.param;
						} else if (data.msg == 'noLogin') {
							window.location.href = "/wchatLoginInit.do?afterLoginUrl=wlcShare.do";
						} else if (data.msg == 'noBindMobile') {
							$("#share").hide();
							$("#bind").show();
						}else if (data.msg == 'noSpliteEnvelope') {
							$("#share").hide();
							$("#invest").show();
						}else if (data.msg == 'spliteEnvelopeDead') {
							$("#share").hide();
							$("#envelopeDead").show();
						}else if (data.msg == 'envelopeEnd') {
							$("#share").hide();
							$("#envelopeEnd").show();
						} else {
							alert(data.msg);
						}
					},
					error : function(data) {
						console.log(data);
					}
				});
	};
</script>
	</body>
</html>